<?php
/**
 * Description: 产品页面
 * User: Administrator
 * Date: 2017/9/4
 * Time: 17:37
 * Created by Created by Panxsoft.
 */
?>

{{--  当前页面的样式表 --}}
@section('style')
    <link rel="stylesheet" type="text/css" href="{{ asset('css/production.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('element/index.css') }}">
@endsection()


{{-- 插入标题 --}}
@section('title')
    <title>{{ $title or '产品-广州市拓声电子科技有限公司' }}</title>
@endsection

@extends('official_website.layouts.main')

@section('content')

    {{-- 隐藏的 SEO 分类列表内容 --}}
    @include('official_website.seo.product-category.index')

    {{-- 隐藏的 SEO 产品列表/详情 --}}
    @include('official_website.seo.production.index')

    <div id="production" v-cloak>

        <!-- 大海报 -->
        <section class="banner"></section>
        
        <section class="main-content">

            <el-row class="product-category" v-if="product_categories && product_categories.length > 0">
    
                <el-col :span="5">
        
                    <el-menu :default-active="init_categroy + ''" 
                            class="el-menu-vertical-demo"
                            :unique-opened="unique_opened" 
                            @select="selectMenu">

                        <div v-for="(category,index) in product_categories" 
                            :key="category.id">

                            <el-submenu v-if="category.get_sub_categories && category.get_sub_categories.length > 0" :index="category.id + ''">
                                <template slot="title">
                                    <span>@{{ category.name }}</span>
                                </template>
                                <el-menu-item   v-for="(sub_category,sub_index) in category.get_sub_categories"                            :key="sub_category.id" 
                                                :index="sub_category.id + ''">
                                    @{{ sub_category.name }}
                                </el-menu-item>
                            </el-submenu>

                            <el-menu-item v-else :index="category.id + ''">
                                <span slot="title">@{{ category.name }}</span>
                            </el-menu-item>

                        </div>

                    </el-menu>

                </el-col>
        
                <el-col :span="19" class="product-introduce">

                    <el-button v-if="!show_list" class="return-btn" type="danger" size="mini" @click="returnList">返回列表</el-button>
        
                    <el-tabs type="card" v-model="active_tab">
                        <el-tab-pane :label="selectedCategroyName" name="product">
                            
                            <div v-if="!loading">

                                <div v-if="production.data && production.data.length > 0">
                                    <div v-if="show_list">

                                        <el-row class="product-list" :gutter="20">
                                            <el-col v-for="( product , index ) in production.data" 
                                                    :key="product.id" 
                                                    :span="6"
                                                    :class="{ 'first-line': index <= 3 , 'left-border' : index%4 === 0 }">
                                                {{--  <div class="product-info" @click="watchProductDetail(product.id)">
                                                    <div class="pre-img">
                                                        <img :src="product.thumb" alt="">
                                                    </div>
                                                    <p>@{{ product.title }}</p>
                                                </div>  --}}
                                                <div class="product-info" @click="watchProductDetail(product.id)">
                                                    <div class="pre-img">
                                                        <img :src="product.thumb" alt="产品缩略图">
                                                    </div>
                                                    <div class="product-desc">
                                                    <p :title="product.model_number">@{{ product.model_number || '未知' }}</p>
                                                        <h3 :title="product.title">@{{ product.title || '未知' }}</h3>
                                                        {{--  <el-button type="info" class="detail-btn" size="mini" @click="watchProductDetail(product.id)">查看详情<i class="el-icon-plus"></i></el-button>  --}}
                                                    </div>
                                                </div>
                                            </el-col>
                                        </el-row>
    
                                        <br />
                                        
                                        <el-row type="flex" justify="center">
                                            <el-pagination  background
                                                @current-change="handleCurrentChange"
                                                :current-page.sync="production.current_page"
                                                :page-size="query_info.per_page"
                                                layout="total, prev, pager, next"
                                                :total="production.total">
                                            </el-pagination>
                                        </el-row>
    
                                    </div>
    
                                    <div class="product-detail" v-else>
    
                                        <div class="thumb-and-intro clearfix">

                                            <div class="detail-thumb">
                                                <img :src="product_detail.thumb" @click="show_modal = true" alt="">
                                                <el-button v-if="product_detail.information" @click="downloadInformation" class="download-btn" type="success" size="mini">资料下载<i class="el-icon-download" ></i></el-button>
                                            </div>

                                            <div class="detail">
                                                <h3>@{{ product_detail.model_number || '未知' }}</h3>
                                                <p>@{{ product_detail.title || '未知' }}</p>
                                                <div class="product-intro" v-html="product_detail.detail"></div>
                                            </div>
    
                                        </div>
    
                                        <br/>
    
                                        <el-tabs type="card" v-model="product_active_tab">
                                            <el-tab-pane label="产品参数" name="product_spec">
                    
                                                <div class="product-parameter" v-html="product_detail.specification"></div>
                    
                                            </el-tab-pane>
                                        </el-tabs>
    
                                        <el-dialog  title="查看大图"
                                                    :center="true"
                                                    :visible.sync="show_modal"
                                                    width="45%">
                                            <img :src="product_detail.thumb" class="big-img" alt="大图">
                                        </el-dialog>
    
                                    </div>
                                </div>
                                
                                <div class="news-loading-info" v-else>
                                    @lang('home.news.empty')
                                </div>
                            </div>

                            <div class="news-loading-info" v-else>
                                <p>@lang('home.news.loading')</p>
                            </div>

                        </el-tab-pane>
                    </el-tabs>

                </el-col>
        
            </el-row>

            <div class="news-loading-info" v-else>
                @lang('home.news.empty')
            </div>

        </section>

    </div>

@endsection

@section('script')
    <script type="text/javascript" src="{{asset('element/index.js')}}"></script>
    <script type="text/javascript" src="{{asset('js/production.js')}}"></script>
@endsection